<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<template>
    <div class="management">
        <div class="management-menu">
            <el-menu active-text-color="#3687ff" background-color="#304156" text-color="#fff" default-active="0"
                class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose" router>
                <el-menu-item>
                    <img class="logo-img" :src="isCollapse ? '/src/assets/zhihui-logo-o.png' : '/src/assets/logo-o.png'"
                        alt="">
                </el-menu-item>
                <el-menu-item index="/userManager">
                    <el-icon>
                        <IEpUserFilled />
                    </el-icon>
                    <template #title>用户管理</template>
                </el-menu-item>
                <el-menu-item index="/doctorManager">
                    <el-icon>
                        <IEpAvatar />
                    </el-icon>
                    <template #title>医生管理</template>
                </el-menu-item>
                <el-menu-item index="/healthManager">
                    <el-icon>
                        <IEpOrange />
                    </el-icon>
                    <template #title>健康管理</template>
                </el-menu-item>
                <el-menu-item index="/drugManager">
                    <el-icon>
                        <IEpFirstAidKit />
                    </el-icon>
                    <template #title>药品管理</template>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="management-right">
            <div class="management-top">
                <el-icon @click="isCollapse = !isCollapse" :value="isCollapse" :size="25">
                    <IEpExpand v-if="isCollapse" />
                    <IEpFold v-if="!isCollapse" />
                </el-icon>
                <span>用户管理</span>
            </div>
            <tabs-view></tabs-view>
            <div class="management-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.management {
    display: flex;

    .management-menu {
        .el-menu {
            height: 100%;
            min-height: 100vh;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            height: 100%;
            min-height: 100vh;
        }

        .el-menu-item {
            height: 70px !important;
        }

        .logo-img {
            height: 30px;
        }
    }

    .management-right {
        flex: 1;

        .management-top {
            display: flex;
            align-items: center;
            height: 50px;
            width: 100%;
            // box-shadow: 0 2px 10px #ccc;
            border-bottom: 1px solid #d8dce5;
            padding-left: 10px;

            span {
                margin-left: 10px;
            }
        }

        .management-content {}
    }
}
</style>